@charset "utf-8";
/* -------------------------------------------------
 * icon scss
 * -------------------------------------------------
 */

// icon
//-----------------------------------------------------

$baseUrl:   "http://www.baidu.com"; //图片url
$imgName:   "icon";
$imgRatio:  2x 1.5, 3x 2.5; // 需要适配的图片尺寸，第一个参数为倍数，第二个参数为该倍数下需要适配的设备像素比
$imgSize:   400px; // 图片的宽度

[class~="icon"] {
    @include inline-block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    background-image: url(#{$baseUrl}/xxx.png);
    background-repeat: no-repeat;
    vertical-align: middle;
}

@mixin img-set($ratio) {
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min-device-pixel-ratio: $ratio) {
        @content;
    }
}

@each $ratio in $imgRatio {
    @if nth($ratio, 1) == 2x {
        @include img-set(nth($ratio, 2)) {
            [class~="icon"] {
                background-image: url(#{$baseUrl}/#{$imgName}_2x.png);
                @include background-size(400px);
            }
        }
    }

    @if nth($ratio, 1) == 3x {
        @include img-set(nth($ratio, 2)) {
            [class~="icon"] {
                background-image: url(#{$baseUrl}/#{$imgName}_3x.png);
                @include background-size(400px);
            }
        }
    }
}